import ErrorBoundary from '@/components/ErrorBoundary';
import Home from './Home';
import Iframe from '@/components/Iframe';
import Inner from './pages/inner';
import Layout from '@/components/Layout';
import Pip from './pages/pip';
import React, { createElement, Suspense } from 'react';
import routes from './routes';
import Setting from './Setting';
import zhCN from 'antd/es/locale/zh_CN';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { ConfigProvider, Spin } from 'antd';

function App() {
  return (
    <ConfigProvider locale={zhCN} input={{ autoComplete: 'true' }}>
      <BrowserRouter>
        <Layout>
          <ErrorBoundary>
            <Suspense fallback={<Spin />}>
              <Routes>
                <Route path="/home" element={<Home />} />
                <Route path="/setting" element={<Setting />} />
                <Route path="/pip" element={<Pip />} />
                <Route path="/" element={<Navigate to="/home" />} />
                {routes.map(({ path, element }) => (
                  <Route
                    key={path}
                    path={path}
                    element={
                      <ErrorBoundary>
                        {createElement(element, {})}
                      </ErrorBoundary>
                    }
                  />
                ))}
                <Route path="/__" element={<Iframe />} />
                <Route path="/_/:id" element={<Inner />} />
              </Routes>
            </Suspense>
          </ErrorBoundary>
        </Layout>
      </BrowserRouter>
    </ConfigProvider>
  );
}

export default App;
